<template>
  <!-- 用户中心天气内容 -->
  <div class="container userCenterContent">
    <div class="row">
      <div class="p-2 col-12 col-md-10 offset-md-1 mb-md-3 bg-white">
        <div class="card bg-dark text-white border-white box" v-if="this.$store.state.getWeather">
          <img class="card-img" :src="getImg" alt="">
          <div class="card-img-overlay imgBg">
            <div class="d-flex justify-content-between">
              <h5 class="card-title">今日天气：{{this.$store.state.getWeather[0].text}}</h5>
              <p>当前温度：{{this.$store.state.getWeather[0].temp}}℃</p>
            </div>

            <p class="card-text">
              当前风力：{{this.$store.state.getWeather[0].windDir}}{{this.$store.state.getWeather[0].windScale}}级，风速{{this.$store.state.getWeather[0].windSpeed}}公里/小时
            </p>
            <p class="card-text">相对湿度为：{{this.$store.state.getWeather[0].humidity}}%</p>
            <p class="card-text">当前小时累计降水量：{{this.$store.state.getWeather[0].precip}}毫米</p>
            <p class="card-text">大气压强：{{this.$store.state.getWeather[0].pressure}}百帕</p>
            <p class="card-text">云量：{{this.$store.state.getWeather[0].cloud}}%</p>
            
            <p class="card-text">{{this.$store.state.getWeather[1].name}}：{{this.$store.state.getWeather[1].level}}级，{{this.$store.state.getWeather[1].category}}</p>
            <p class="card-text">{{this.$store.state.getWeather[1].text}}</p>

            <p class="card-text text-monospace">日出时间：{{this.$store.state.getWeather[2].sunrise}}</p>
            <p class="card-text text-monospace">日落时间：{{this.$store.state.getWeather[2].sunset}}</p>

            <p class="card-text font-italic text-monospace" style="font-size: .875em">数据观测时间：{{this.$store.state.getWeather[0].obsTime}}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import yinTian from 'assets/img/yintian.jpg'
  import duoYun from 'assets/img/duoyun.jpg'
  import qingTain from 'assets/img/qingtain.jpg'
  import leiDian from 'assets/img/leidian.jpg'
  import xiaYu from 'assets/img/xiayu.jpg'

  export default {
    name: 'UserCenterContent',
    data () {
      return {
        // 天气背景图
        yinTian,
        duoYun,
        qingTain,
        leiDian,
        xiaYu
      }
    },
    mounted() {
      // 获取当前时间，请求计算日出日落
      let date = new Date();
      let y = date.getFullYear();
      let m = date. getMonth() + 1;
      let d = date.getDate();

      if (m < 10) {
        m = '0' + m;
      }
      if (d < 10) {
        d = '0' + d;
      }
      // 发送当前日期时间
      this.$store.commit('nowDateUpWeather', y + m + d);
      if (this.$store.state.nowDateUpWeather) {
        // 接受时间后发送天气请求
        this.$store.dispatch('asynGetWeather');
      }
    },
    computed: {
      // 通过状态码获取当前天气与之对应的背景图片
      getImg() {
        let flag = this.$store.state.getWeather[0].icon;  //获取当前天气状态码
        let weather;
        let rain = [];

        for (let i = 300; i <= 318; i++) {
          if (i ==302 || i ==303 || i ==304) {
            continue;
          } else {
            rain.push(i);
          }
        }

        let rainItem;
        for (let i = 0; i < rain.length; i++) {
          if (flag == rain[i]) {
            rainItem = rain[i];
          }
        }

        if (flag == 100 || flag == 103 || flag == 150 || flag == 153) {
          weather = this.qingTain;
        } else if (flag == 101 || flag == 102 || flag == 150 || flag == 153) {
          weather = this.duoYun;
        } else if (flag == rainItem || flag == 399 || flag == 350 || flag == 351) {
          weather = this.xiaYu;
        } else if (flag == 302 || flag == 303 || flag == 304) {
          weather = this.leiDian;
        } else if (flag == 104 || flag == 154) {
          weather = this.yinTian;
        } else {
          weather = '';
        }

        return weather;
      }
    }
  }

</script>

<style scoped>
  .box {
    min-height: 500px;
  }

  .imgBg {
    background-color: rgba(0, 0, 0, .4);
  }

</style>